Formulare: Auswahl von Daten

Letztes Update:

21. September 2023

Entwurf – Inhalt noch in Arbeit

Symbolbild

Wie hilft dieses Element den Nutzern?

Gibt es im Rahmen eines Formulares feste bzw. kategorisierbare Werte, können vorgegebene Optionen die Daten-Auswahl für den Nutzer erleichtern.
Es verhindert dass der Nutzer nicht verstehen könnte was er eintragen soll, verhindert Tippfehler oder sonstige Falsch-Eingaben und erhöht grundsätzlich die Datenqualität. z.B: Budgetvorstellung, Zimmerkategorien, Zimmeranzahl, Abreiseflughafen,…

Wann kommt dieses Element zum Einsatz?

Formulare können von einem einzelnen Eingabe- Auswahlfeld (z.B. bei einer Suche) bis zu mehrseitigen komplexen Buchungsstrecken umfassen.
Dabei dürfen ausschließlich die notwendigsten Eingaben vom Nutzer gefordert werden. (Absprungrate + Datenschutz)

Für unterschiedliche Verwendungszwecke gibt es folgende Auswahlmöglichkeiten

Auswahl von Daten:
wenn Daten fixe Werte darstellen bzw. kategorisierbar sind. z.B: Budgetvorstellung, Zimmerkategorien, Zimmeranzahl, Abreiseflughafen,…

Auch wenn Funktionen aktiviert bzw. deaktivert werden können.

  • Radio-Button: Einzelauswahl von weniger als 5 Daten mit flacher Hierarchie. Nicht zu verwenden für die aktion aktivieren oder deaktivieren von Funktionen
  • Switches: “Schalter” zum aktivieren oder deaktivieren von Funktionen.
  • Drop-Down: Einzelauswahl von mehr als 5 DAten mit flacher Hierarchie
  • Checkbox: Mehrachauswahl von weniger als 5 Daten mit flacher Hierarchie
  • Suche mit Vorschlagsfunktion:
    • – Mehrachauswahl von mehr als 5 Daten mit flacher Hierarchie
    • – vor allem wenn die Liste nicht erwartungskonform (chronologisch/ alpha-betisch) sortiert werden kann
    • – bei hierarchischen Daten (Tree) – bzw. wenn es möglich ist dass Nutzer den richtigen Begriff nicht kennen
  • Slider: für numerische Daten mit kontinuierlicher Auswahl
  • up/Down: für numerische Daten mit diskreter Auswahl
  • Datums und Zeit- Auswahl: für Einzelauswahl (-eingabe) oder Mehrfachauswahl (-eingabe) von Datums- und Zeit-Werten
  • Auswahlfeld zum Upload von Dateien siehe >> Datei-Upload durch Nutzer

UX Konzeption

Einzelauswahl bzw. Optionsfelder: Radio-Button

Radiobuttons erlauben die Auswahl einer (1) aus mehreren Optionen.
Jeder Radiobutton erhält eine Beschriftung die sich rechts davon befindet. Zusätzlich erhält die Gruppe an Radiobuttons eine übergeordnete Headline.
Der jeweilige Radiobutton UND seine Beschriftung sind klickbar
Da der Nutzer, sobald einer der Radiobuttons gewählt ist, keine Option mehr hat diesen komplett abzuwählen, erhalten Gruppen von Radiobuttons die kein Pflichtfeld darstellen jeweils eine Option „sonstiges“ (oder „kein“ oder ähnliche allgemeine Bezeichnung).
Die Anordnung ist immer untereinander.
Die jeweiligen Gruppen müssen als solche erkennbar sein.
Handelt es sich um kein Pflichtfeld, erfolgt eine Kennzeichnung mit „(optional)“ bei der Headline der Radiobutton-Gruppe.

Barrierefreiheit: Die Gruppe der Radiobuttons erhält das Attribut role=“radiogroup“ und ein erklärendes Label. Überschriften der Radiobutton-Gruppe dürfen nicht als Headline oder sonstige semantische Auszeichnung realisiert werden.
Die Beschriftung jedes Radiobuttons wird mittels als Beschriftung des jeweiligen Radiobuttons ausgezeichnet.

Umschalten: Switches

folgt…

Einzelauswahl: Dropdown

Dropdown Menüs werden verwendet wenn die Optionen, von welchen der Nutzer nur eine (1) auswählen soll, mehr als 4 bis max. 5 beträgt. Bei weniger Auswahlmöglichkeiten kommen Radiobuttons zum Einsatz da diese dem Nutzer sofort Klarheit über die Möglichkeiten geben und diese nicht hinter einem Klick verstecken.
Bei mehr als ca 5 Elementen erhält das Dropdown einen Scrollbalken.
Listenelemente werden bei hover bzw. Focus entsprechend dem CD hervorgehoben;

Sortierung:

gibt es die Auswahlmöglichkeit „kein“, findet sich diese an erster Stelle.

Bei intuitiver Reihenfolge wie z.B: bei Wochentagen wird nach dieser sortiert;
Bei Abläuf folgt die Sortierung der Logik des Ablaufs;
Gibt es keine intuitive Reihenfolge oder Ablauf wird alphabetisch sortiert;
Numerische Werte werden numerisch sortiert

Zusätzliche Sortierung:

ZUSÄTZLICH zu oben genannten Sortierungen kann eine Sortierung nach Häufigkeit hinzugefügt werden. Dabei werden zuerst die häufigst gewählten Elemente angegeben. Gefolgt von einer optischen Trennung folgt darauf eine entsprechend sortierte Liste der Auswahloptionen.

Auch Dropdowns müssen mit entsprechenden Aria-Attributen gekennzeichnet werden.

Mehrfachauswahl: Check-Box

Checkboxen werden für Mehrfachauswahlen verwendet oder bei ja/nein Optionen einzeln;
Eine Checkbox stellt immer nur einen Status dar und löst keine Aktion aus.

jede Checkbox weist eine Beschriftung auf, welche sich rechts von ihr befindet. Beide sind klickbar für die Auswahl! Die Beschriftung ist mittels als zugehörig zur jeweiligen Checkbox gekennzeichnet. Beschriftungen werden nicht als Fragen formuliert.

Werden mehrere Checkboxen gruppiert, befindet sich darüber eine Überschrift die den Inhalt der Gruppe beschreibt. Die Gruppe wird mit und >caption> umgesetzt. Überschriften der Gruppe werden nicht als Headings oder anderen semantischen Tags realisiert.

Mehrfachauswahl: Suche mit Vorschlagsfunktion

Geeignet für komplexe Anwendungsfälle

  • flache Hierarchie der Einträge – Mehrfachauswahl mehr als 5 – vor allem wenn die Liste nicht erwartungskonform (chronologisch/alphabetisch) sortiert werden kann
  • hierarchisch – wenn die Sortierung der Elemente hierarchischer Natur wäre
  • wenn es möglich ist dass der Nutzer den richtigen Begriff garnicht kennt.

Beispielsweise wenn Flughäfen oder Bahnhöfe ausgewählt werden sollen. Hier könnte der Nutzer den Namen der Stadt eingeben und bekäme dann alle möglichen Flughäfen bzw. Bahnhöfe angezeigt, auch wenn diese nicht mit dem Städte-Namen beginnen.

Details zur Konzeption von Suchfunktionen

hierarchisch

numerisch: Slider

Spinbutton – numerisch: up-down

Datums- (und Zeit-) Wähler

Datepicker

Alternative 3 Dropdowns

Strukturierte Daten / Schema.org

Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche

Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:

Weiterführendes zu Zugänglichkeit und Barrierefreiheit

Richtlinie für barrierefreie Webinhalte (WCAG)

Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.

Accessible Rich Internet Application (ARIA)

ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.


Detailliertere Informationen für vorliegendes Element:

UX-Writing

Wenn Daten eingegeben und/oder ausgewählt bzw. Elemente zwecks Interaktion geklickt werden sollen, benötigen diese aussagekräftige Beschreibungen.
Diese dienen der Verständlichkeit, führen bzw. leiten die Nutzer und beeinflussen ob diese abbrechen oder die Navigation bzw. Dateneingabe fortsetzen.

Was ist zu texten

  • Labels
  • Placeholder
  • Eingabehilfen
  • Überschriften für Element-Gruppierungen
  • Button-text zur Datenübermittlung
  • Steuerelemente bei mehrseitigen Formularen
  • Alternativ-Texte zu diversen verwendeten Icons
  • Beschriftung der Optionen zur Steuerung bzw. Zustand von Switches
  • individualisierte Fehlermeldungen >> siehe “Feedback: Fehlermeldungen”
  • Hilfstexte und Korrekturvorschläge >> siehe “Feedback: Fehlermeldungen”

Wie ist zu texten

Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:

  • beschreiben ganz klar das Thema bzw. den Zweck des Feldes
  • klar formulieren
  • eindeutig beschreiben
  • einfach wie möglich
  • nie komplett in Großbuchstaben
  • Vorrangig einzelne Worte als Beschriftung wählen.
  • Ganze Sätze bzw. Fragen machen nur in extremen Ausnahmefällen und müssen gut begründbar sein.
  • Geläufige, einfache Begriffe wählen
  • Begriffe müssen ohne Kontext verständlich sein!
  • der Nutzer darf nicht nachdenken müssen!
  • Die Anfangsbuchstaben der jeweiligen Beschriftungen sind immer groß zu schreiben.

UI-Design

Verhaltensregeln (Dos&Donts)

Positionierung und Abstände zu anderen Elementen

Verwendungsbeispiele

Hilfreiches

Ähnliche Elemente

Hilfreiche Basiselemente

Nicht das passende gefunden?

Schreib´uns gerne Deine Inputs!

E-Mail schreiben

Was suchst du?

Zurück zur Übersicht

Marken

VERKEHRSBUERO VERKEHRSBUERO TRAVELVERKEHRSBUERO HOSPITALITYRuefaAustria Trend HotelsEurotoursBASSENAPalais EventsHotel SchillerparkHotel RathausparkTribelloAustropaJust AwayIntertravel

weitere Angebote

KurzübersichtBravoMediathek


Kontakt | ImpressumDatenschutz© 2023 VERKEHRSBUERO